import React from 'react';

import dispatcher from 'lib/dispatcher';
import Loading from 'lib/components/Loading.jsx';

import EventContainer from './EventContainer.jsx';

export default class MainView extends Loading {
  changeIndicatorHandler(index, item) {
    dispatcher.dispatch({
      $type: 'change_indicator',
      index,
      event: item.value
    });
  } // changeIndicatorHandler

  addEventHandler() {
    dispatcher.dispatch({
      $type: 'add_event'
    });
  } // addEventHandler

  removeEventHandler(index) {
    dispatcher.dispatch({
      $type: 'remove_event',
      index
    })
  } // removeEventHandler

  renderBody(data) {
    return (
      <div className="auto-row" style={{ marginTop: 15 }}>
        <div className="left">事件指标</div>
        <div className="main" style={{ minHeight: 21 }}>
        {
          this.props.eventIndicators.map((item, index) => (
            <EventContainer
              key={ index }
              { ...item }
              events={ data }
              height={ 38 }
              openDisabled={ true }
              onChanged={ this.changeIndicatorHandler.bind(this, index) }
              onRemoving={ this.removeEventHandler.bind(this, index) }
              canRemove={ this.props.eventIndicators.length !== 1 }
              properties={ this.props.properties[item.event] } />
          ))
        }
        </div>
        <div className="line-add">
          <div className="btn-container" onClick={ this.addEventHandler.bind(this) }>
            <i className="iconfont btn-add">&#xe6bd;</i>
          </div>
          <div className="line-container">
            <div className="line"></div>
          </div>
        </div>
      </div>
    );
  } // renderBody
}

MainView.defaultProps = {
  eventIndicators: [],
  properties: {}
}
